<template>
	<view class="pay">
		<u-navbar
			title="支付"
			:border-bottom="false" 
			title-color="#000"
		></u-navbar>
		<view class="type-box" @click="typeSelect=true">
			<view class="type-box__title">支付方式</view>
			<view class="type-box__type">
				<view class="type-box__type__left">
					<image class="type-box__type__left__icon"  :src="typeList[typeIndex].icon" mode="aspectFit" />
					<view class="type-box__type__left__name">{{typeList[typeIndex].type}}</view>
				</view>

				<view class="type-box__type__right">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		
		<u-popup v-model="typeSelect" mode="bottom" :closeable="true">
			<view class="type-select-box">
				<view class="type-select-box__title">选择支付方式</view>
				<view class="type-select-box__type" v-for="(type,index) in typeList" @click="chooseType(index)">
					<view class="type-select-box__type__left">
						<image class="type-select-box__type__left__icon"  :src="type.icon" mode="aspectFit" />
						<view class="type-select-box__type__left__name">{{type.type}}</view>
					</view>
				
					<image class="type-select-box__type__right" v-if="index==typeIndex" src="/static/mine/barriergate/choose.svg">
							
					</image>
				</view>
			</view>

		</u-popup>
				
		<view class="pay-info">
			<view class="pay-info__title">
				缴费金额
			</view>
			<view class="pay-info__charge">
				<view class="pay-info__charge__symbol">
					¥
				</view>
				<view class="pay-info__charge__value">
					3.0
				</view>
			</view>
			<view class="pay-info__message">
				缴费类型：停车缴费
			</view>
		</view>
		<view  class="confirm">
			确认缴费
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList:[
					{
						type:"月卡",
						icon:"/static/mine/barriergate/card.svg"
					},
					{
						type:"付款",
						icon:"/static/mine/barriergate/other.svg"
					}
				],
				typeIndex:0,
				typeSelect:false,
			}
		},
		methods: {
			chooseType(index){
				this.typeIndex=index
				this.typeSelect=false
			}
		}
	}
</script>

<style lang="less">
.pay{
	background-color: @uni-bg-color-grey;
	height: calc(100vh);
}
.type-box{
	display: flex;
	flex-direction: column;
	margin-top: @uni-spacing-row-base;
	&__title{
		// font-weight: bolder;
		margin-left:@uni-spacing-col-lg ;
	}
	&__type{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: @uni-spacing-row-base @uni-spacing-col-lg;
		&__left{
			display: flex;
			flex-direction: row;
			align-items: center;
			&__icon{
				width: @uni-img-size-sm;
				height: @uni-img-size-sm;
			}
			&__name{
				margin-left: @uni-spacing-col-lg;
			}
		}
	}
}
.type-select-box{
	display: flex;
	flex-direction: column;

	background-color: @uni-bg-color-grey;
	padding-bottom: @uni-spacing-row-base;
	&__title{
		margin-top: @uni-spacing-row-base;
		margin-bottom: @uni-spacing-row-base;
		margin-left:@uni-spacing-col-lg ;
	}
	&__type{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: @uni-spacing-row-base @uni-spacing-col-lg;
		margin: @uni-spacing-row-sm @uni-spacing-col-lg 0 @uni-spacing-col-lg;
		background-color: #fff;
		&__left{
			display: flex;
			flex-direction: row;
			align-items: center;
			&__icon{
				width: @uni-img-size-sm;
				height: @uni-img-size-sm;
			}
			&__name{
				margin-left: @uni-spacing-col-lg;
			}
		}
		&__right{
			width: @uni-img-size-sm;
			height: @uni-img-size-sm;
		}
	}
}
.pay-info{
	display: flex;
	flex-direction: column;
	margin: @uni-spacing-row-base @uni-spacing-col-lg;
	border-radius: @uni-border-radius-lg;
	background-color: #fff;
	margin-top: @uni-spacing-row-base;
	margin-bottom: @uni-spacing-row-base;
	padding-top: @uni-spacing-row-base;
	padding-bottom: @uni-spacing-row-base;
	&__title{
		margin-left: @uni-spacing-col-lg;
	}
	&__charge{
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		margin-left: @uni-spacing-col-lg;
		margin-right: @uni-spacing-col-lg;
		margin-top: @uni-spacing-row-lg;
		&__symbol{
			font-size: @uni-font-size-lg;
		}
		&__value{
			font-size: @uni-font-size-xxx-lg;
			
		}
	}
	&__message{
		margin-top: @uni-spacing-row-base;
		margin-left: @uni-spacing-col-lg;
		margin-right: @uni-spacing-col-lg;
		padding-top: @uni-spacing-row-base;
		color: @font-color-grey;
		font-size: @uni-font-size-sm;
		border-top: @line-light-size solid @uni-border-color;
	}
}
.confirm{
	margin: @uni-spacing-row-lg @uni-spacing-col-lg;
	
	padding-top: @uni-spacing-row-base;
	padding-bottom: @uni-spacing-row-base;
	text-align: center;
	flex: 1;
	border-radius: @uni-border-radius-base;
	border: 1px solid @font-color-blue;
	background-color: @uni-bg-color-blue;
	font-size: @uni-font-size-lg;
	color: #fff;
}
</style>
